<template>
  <div class="body">
    <div class="box">
      <img src="../../assets/images/login.png" alt="" />
      <div class="right">
        <p class="title">公寓管理系统登录</p>
        <i></i>

        <div class="input">
          <el-form
            label-position="top"
            label-width="100px"
            style="max-width: 460px"
          >
          </el-form>

          <p class="password">用户名 :</p>
          <el-input
            v-model="textinput"
            type="text"
            placeholder="请输入您的用户名"
          />

          <Close
            style="width: 20px; height: 20px"
            class="close"
            @click="close"
          />
          <p class="password">密码 :</p>
          <el-input
            v-model="pwsinput"
            type="password"
            placeholder="请输入您的密码"
            show-password
          />
          <el-checkbox
            v-model="checked1"
            label="记住用户名和密码"
            size="large"
          />
          <span class="reset"> 忘记密码 </span>
          <p class="message" v-show="show">用户名或密码错误</p>
          <p>
            <button type="submit" @click="submit">登录</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";
import "@/mock/login";
import axios from "axios";
import { useRouter } from "vue-router";
const checked1 = ref(false);
const router = useRouter();
const textinput = ref<any>("");
const pwsinput = ref<any>("");
const show = ref(false);

//叉号清空内容
const close = () => {
  textinput.value = "";
};

const submit = () => {
  axios
    .post("/api/login", { username: textinput.value, password: pwsinput.value })
    .then((res) => {
      if (res.data.status === 0) {
        localStorage.setItem("username", textinput.value);
        localStorage.setItem("img", res.data.result.img);
        if (checked1.value === true) {
          localStorage.setItem("password", pwsinput.value);
        }
        router.replace("/home");
      }
      if (res.data.status != 0) {
        show.value = true;
      }
    });
};
onMounted(() => {
  if (localStorage.getItem("username")) {
    textinput.value = localStorage.getItem("username");
    pwsinput.value = localStorage.getItem("password");
  }
});
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #4ca4fe;
}
.box {
  width: 1000px;
  height: 560px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  img {
    width: 430px;
    height: 400px;
    margin: 84px 0 0 70px;
  }
  .right {
    flex: 1;
    height: 400px;
    margin-top: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    i {
      display: inline-block;
      width: 300px;
      height: 2px;
      background-color: #eee;
    }

    .input {
      margin-top: 30px;
      width: 300px;
      position: relative;
      :deep(.el-form-item__label) {
        margin: 0;
        color: #000;
      }
      .password {
        font-size: 16px;
        margin-top: 20px;
      }

      .close {
        position: absolute;
        top: 45px;
        right: 10px;
      }
      form > img {
        width: 18px;
        height: 15px;
        margin: 0;
        position: absolute;
        top: 102px;
        right: 12px;
      }
      button {
        width: 260px;
        height: 30px;
        font-size: 18px;
        border: 0;
        color: #fff;
        border-radius: 20px;
        background-color: #4ca4fe;
        margin-top: 50px;
      }
      .reset {
        font-size: 14px;
        margin-left: 100px;
      }
      .reset:hover,
      .close,
      .yincang {
        width: 16px;
        height: 15px;
        cursor: pointer;
      }
      :deep(.el-input__wrapper) {
        box-shadow: none;
        border-bottom: 1px solid #000;
        border-radius: 0;
      }
      .is-focus {
        box-shadow: 0;
      }
      .message {
        font-size: 18px;
        color: red;
        position: absolute;
        top: 190px;
        left: 10px;
      }
    }
  }
}
</style>
